<%@ page language="java" contentType="text/html; charset=utf-8"	pageEncoding="utf-8"%>

<html>
<head>
<script type="text/javascript" >
var faceStatusJson;  
$(document).ready(function () {         
var domain = window.location.host;
var video = document.getElementById("video");
var canvasBox = document.getElementById("canvas-box");
var arr = [];
 console.log(domain);
var errocb = function () {
 } 
 if (navigator.getUserMedia) { // 标准的API
    navigator.getUserMedia({ "video": true }, function (stream) {
        video.srcObject  = stream;
        video.play(video.srcObject );
    }, errocb);
} else if (navigator.webkitGetUserMedia) { // WebKit 核心的API
    navigator.webkitGetUserMedia({ "video": true }, function (stream) {
        video.srcObject  = window.webkitURL.createObjectURL(stream);
        video.play();
    }, errocb);
 }  
 document.getElementById("paizhao").addEventListener("click", function () {
		arr.push(video)
		var canvasDom = document.createElement('canvas')
		
		//拍够10张照片后就不允许拍照了
		if(arr.length>=11){
			debugger;
			document.getElementById("remind").innerHTML = "<d style='color:red'>拍够十张，不允许再拍摄！</d>";
			document.getElementById("paizhao").disabled=true;
			return ;
		}
		
 		for(i=0;i<arr.length;i++){
			canvasDom.setAttribute('id','canvas'+i)
			canvasDom.setAttribute('width',200)
			canvasDom.setAttribute('height',180)
			canvasBox.appendChild(canvasDom);
			var canvas = eval('canvas'+i);
			setTimeout(function(){
				var context = canvas.getContext("2d")
				context.drawImage(video, 10, 0, 200,180)
			},500)
		}
		});

})
</script>

<script type="text/javascript">
var faceStatusJson;  
$(document).ready(function () {         
	
})


/**
 * 保存页面数据
 */
 function saveface() {
	//判断姓名是否为空
	var canvasbos=$("#canvas-box").children().length;
	if(canvasbos==null||canvasbos==0){
		var spans= document.getElementById("massage")
		spans.style="display:inline-block;color:red"
		return;
	}  
    //获取canvas的编码
    
    var imageName = "";
    //获取每个图片，循环提交到后台
    for(var i=0;i<$("#canvas-box").children().length;i++){
    	 var imgData = document.getElementById("canvas"+i).toDataURL("image/jpeg");
         var b64 = imgData.substring(23);
          $.ajax({
         	 url: "rest/face/saveImg.do",
         	 type:'post',
         	 async:false,
        	 data: { "image": b64},
        	 success:function (data){  
         		 imageName +=   data+","; 
         	 }  
         	 });  
    }
    var typeVal = $('#type').combobox('getValue');
    console.log($("#type"));
    console.log(typeVal);
    //将数据保存到数据库中
    $.ajax({
    	 url: "rest/face/saveData.do",
    	 type:'post',
    	 data: { "imageName": imageName,"type":typeVal,"name":"${name}"},  	 
    	 success:function (data){
    		
      		 //返回到默认选中展示目录
      		 parent.showCenter('person/gofaceto.do?name=${name}');
      		 
      		//'http://'+host+'/faceApi/addPhoto'
      	}

    	 });
} 
/**
 * 返回页面
 */
function back(){
	$.post('person/gofaceto.do?name=${name}', {}, function(data){
		$("#center").empty();
        $("#center").html(data);
        $.parser.parse($("#center"));
    });
}
	
   /*  $('#face-fm').form('submit', {
        url: 'rest/face/save.do',        
        
        success: function (result) {
        	$.messager.progress('close'); 
            var result = eval('(' + result + ')');
            if (result.retCode=='0000') {
            	back('face/index.do');
                
            } else {
                $.messager.show({
                    title: 'Error',
                    msg: result.retMsg
                });
            }
        }
    }); */
    
</script>
</head>
<body>
		
<div class="linkbar"><a> 人员管理</a>/<a> 人脸库管理</a>/<a> 人脸库录入</a></div>
		<div id="face-add" 	buttons="#face-add-buttons">
			<form id="face-fm" method="post" novalidate enctype="multipart/form-data">
			<div class="fitem">
				<label>姓名:</label> ${name }
			</div>
			<div class="fitem">
				<label>类型:</label> 
				<select id="type" name="type" class="easyui-combobox" style="width:100px" >
					    <option value="1">正常</option>
					    <option value="2">口罩</option>
					    <option value="3">墨镜</option>					    
				</select> 
			</div>

			<!-- <div class="fitem">
				<label>照片:</label>  <input type="file" name="annexUrl" id="annexUrl" multiple="multiple"/>
			</div> -->
			<div>
				
				<span id="remind"></span>
				<br/>
				<!-- <button class="easyui-linkbutton" onClick="saveFile(filename);" type="button">下载图片</button> -->
				<video id="video" width="200" height="180" autoplay></video>
				<div id="canvas-box">
					<!-- <canvas id="canvas" width="640" height="480"></canvas>
        		<canvas id="canvas2" width="640" height="480"></canvas>   -->
				</div>
				<img /> 
			</div>
		</form>
		</div>
		<div id="dlg-buttons">
			<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="back()">返回</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-ok" id="paizhao">拍照</button>
			<a href="#" class="easyui-linkbutton" iconCls="icon-ok" 	onclick="saveface()">保存</a> 
			<span style="display:none" id="massage">请先拍照!!!</span>
		</div>
		

</body>
</html>
</html>